<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通知设置 - 贵州四季康养文旅</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-vue-next/dist/index.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f0f2f5;
            color: #333;
            overflow-x: hidden;
        }
        .setting-group {
            margin-bottom: 16px;
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
        }
        .setting-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        .setting-item:last-child {
            border-bottom: none;
        }
        .group-title {
            padding: 12px 16px;
            font-size: 14px;
            color: #666;
            background-color: #f9f9f9;
        }
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 52px;
            height: 32px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 24px;
            width: 24px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .toggle-slider {
            background-color: #0052d9;
        }
        input:checked + .toggle-slider:before {
            transform: translateX(20px);
        }
        .notification-info {
            padding: 16px;
            font-size: 13px;
            color: #666;
            line-height: 1.5;
        }
        .notification-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="pb-16"> <!-- 底部导航栏的空间 -->
        <!-- 顶部导航 -->
        <header class="bg-white p-4 flex items-center shadow-sm">
            <a href="../settings/settings.html" class="mr-4">
                <i class="t-icon t-icon-arrow-left text-xl"></i>
            </a>
            <h1 class="text-lg font-medium flex-1 text-center">通知设置</h1>
        </header>
        
        <!-- 通知设置内容 -->
        <div class="p-4">
            <!-- 总开关 -->
            <div class="setting-group">
                <div class="setting-item">
                    <div class="flex items-center">
                        <div class="notification-icon bg-blue-600">
                            <i class="t-icon t-icon-notification"></i>
                        </div>
                        <div>
                            <div class="font-medium">接收所有通知</div>
                            <div class="text-xs text-gray-500 mt-1">关闭后将不再收到任何通知提醒</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>
            
            <!-- 聊天消息通知 -->
            <div class="setting-group">
                <div class="group-title">聊天消息通知</div>
                
                <div class="setting-item">
                    <div class="flex items-center">
                        <div class="notification-icon bg-green-500">
                            <i class="t-icon t-icon-chat"></i>
                        </div>
                        <div>
                            <div class="font-medium">聊天消息通知</div>
                            <div class="text-xs text-gray-500 mt-1">新聊天消息的通知提醒</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                
                <div class="setting-item">
                    <div>
                        <div class="font-medium">声音</div>
                        <div class="text-xs text-gray-500 mt-1">收到新消息时播放提示音</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                
                <div class="setting-item">
                    <div>
                        <div class="font-medium">振动</div>
                        <div class="text-xs text-gray-500 mt-1">收到新消息时手机振动</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>
            
            <!-- 社交互动通知 -->
            <div class="setting-group">
                <div class="group-title">社交互动通知</div>
                
                <div class="setting-item">
                    <div class="flex items-center">
                        <div class="notification-icon bg-purple-500">
                            <i class="t-icon t-icon-community"></i>
                        </div>
                        <div>
                            <div class="font-medium">社区互动通知</div>
                            <div class="text-xs text-gray-500 mt-1">点赞、评论和关注的通知提醒</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                
                <div class="setting-item">
                    <div>
                        <div class="font-medium">新点赞</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                
                <div class="setting-item">
                    <div>
                        <div class="font-medium">新评论</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                
                <div class="setting-item">
                    <div>
                        <div class="font-medium">新关注</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>
            
            <!-- 交易相关通知 -->
            <div class="setting-group">
                <div class="group-title">交易相关通知</div>
                
                <div class="setting-item">
                    <div class="flex items-center">
                        <div class="notification-icon bg-orange-500">
                            <i class="t-icon t-icon-shop"></i>
                        </div>
                        <div>
                            <div class="font-medium">订单通知</div>
                            <div class="text-xs text-gray-500 mt-1">订单状态变更和物流信息的通知</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                
                <div class="setting-item">
                    <div>
                        <div class="font-medium">支付通知</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                
                <div class="setting-item">
                    <div>
                        <div class="font-medium">物流通知</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                
                <div class="setting-item">
                    <div>
                        <div class="font-medium">优惠促销通知</div>
                        <div class="text-xs text-gray-500 mt-1">优惠券、限时活动等促销信息</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox">
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>
            
            <!-- 系统通知 -->
            <div class="setting-group">
                <div class="group-title">系统通知</div>
                
                <div class="setting-item">
                    <div>
                        <div class="font-medium">系统更新通知</div>
                        <div class="text-xs text-gray-500 mt-1">新功能、版本更新等系统通知</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                
                <div class="setting-item">
                    <div>
                        <div class="font-medium">安全通知</div>
                        <div class="text-xs text-gray-500 mt-1">账户登录、安全提醒等通知</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>
            
            <div class="notification-info">
                <p>通知设置仅控制小程序内的通知提醒，如需控制系统推送通知，请前往手机系统设置。</p>
            </div>
        </div>
    </div>
</body>
</html> 